<template>
  <a-modal
    :title="title"
    :width="800"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleOk"
    @cancel="handleCancel"
    cancelText="关闭"
    wrapClassName="ant-modal-cust-warp"
    style="top:5%;height: 85%;overflow-y: hidden">
    <div class="checkModule">请勾选应用:</div>
    <a-table
      class="module-table"
      ref="table"
      size="middle"
      bordered
      rowKey="id"
      :columns="columns"
      :dataSource="dataSource"
      :pagination="ipagination"
      :loading="loading"
      :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
      @change="handleTableChange">
      <span slot="description" slot-scope="{description}" class="table-description" :title="description">{{description}}</span>
    </a-table>
  </a-modal>
</template>

<script>
  import Vue from 'vue'
  import { JeecgListMixin } from '@/mixins/JeecgListMixin'
  import { getAction, postAction } from '@/api/manage'
  export default {
    name: "RelationModule",
    mixins:[JeecgListMixin],
    components: {
    },
    data () {
      return {
        title:"关联应用",
        visible: false,
        confirmLoading: false,
        roleList: [],
        columns: [
          /*{
            title: '#',
            dataIndex: '',
            key:'rowIndex',
            width:60,
            align:"center",
            customRender:function (t,r,index) {
              return parseInt(index)+1;
            }
           },*/
          {
            title: '应用名称',
            align: "center",
            dataIndex: 'name'
          },
          {
            title: '应用名',
            align: "center",
            dataIndex: 'appName'
          },
          {
            title: '访问地址',
            align: "left",
            width: '25%',
            dataIndex: 'path'
          },
          {
            title: '应用描述',
            align: "left",
            width: '25%',
            key: 'description',
            scopedSlots: {customRender: 'description'}
          },
          {
            title: '排序',
            align: "center",
            dataIndex: 'sortOrder'
          }
        ],
        url: {
          list: "/sys/module/list",
          relationList: "/sys/module/queryRoleModule",
          relation: "/sys/module/saveRoleModule"
        },
      }
    },
    methods: {
      handleCancel () {
        this.close()
      },
      close () {
        this.visible = false;
      },
      handleOk () {
        let that = this;
        let param = {
          roleIds: this.roleList.join(','),
          moduleIds: this.selectedRowKeys.join(',')
        };
        postAction(this.url.relation, param).then((res) => {
          if (res.success) {
            that.$message.success(res.message);
            this.$emit('ok');
            that.close();
          } else {
            that.$message.warning(res.message);
          }
        });
      },
      getRelationModule(id) {
        getAction(this.url.relationList, {roleId: id}).then((res) => {
          if (res.success) {
            this.selectedRowKeys = res.result.map(({id}) => { return id});
          }
        })
      },
      relation (type, data) {
        if (type == '1') {
          this.roleList = [data];
          this.getRelationModule(data);
        } else {
          this.selectedRowKeys = [];
          this.roleList = data;
        }
        this.visible = true;
      }
    }
  }
</script>

<style scoped>
  .checkModule{
    margin-bottom: 10px;
  }
  .avatar-uploader > .ant-upload {
    width:104px;
    height:104px;
  }
  .ant-upload-select-picture-card i {
    font-size: 49px;
    color: #999;
  }

  .ant-upload-select-picture-card .ant-upload-text {
    margin-top: 8px;
    color: #666;
  }

  .ant-table-tbody .ant-table-row td{
    padding-top:10px;
    padding-bottom:10px;
  }

  .drawer-bootom-button {
    position: absolute;
    bottom: -8px;
    width: 100%;
    border-top: 1px solid #e8e8e8;
    padding: 10px 16px;
    text-align: right;
    left: 0;
    background: #fff;
    border-radius: 0 0 2px 2px;
  }
</style>
<style>
  .module-table table {
    table-layout: fixed;
  }

  .table-description {
    display: inline-block;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
</style>